Ext.define('joydeep.view.Viewport', {
    extend: 'Ext.container.Viewport',
    alias : 'widget.app_view',
    id : 'myviewport',
    layout: 'border',
    autoScroll : true,
   
    initComponent: function() {
        Ext.apply(this,{
            items : [{
                region: 'north',  
                title: '<div id="largeHeaderLink">Global WorkStation</div>',
				id:'northView', 
                border: false,
                margins: '0 0 0 0',
                collapsible: true,
                split: true,
                //xtype:'box',
                height: 48,
                items :[tb]
            }, {
                region: 'west',
                //collapsible: true,
                split: true,
                title: 'Navigation',
				id:'westView',
                width: 150//,
                // could use a TreePanel or AccordionLayout for navigational items
               /* items:[
                        {
                            xtype: 'app_menu'
                        }                      
                 ]*/
            },
            {
                region: 'center',
                id:'centerView',                
                xtype: 'panel', // TabPanel itself has no title
                title : 'Default Screen'
            }]
        });
       
        this.callParent(arguments);
    }
});

var tb = Ext.create('Ext.toolbar.Toolbar');
//tb.suspendLayout = true;

tb.add({
    text:'Institutional',
    menu: {
        items: [{
                    text: 'Choose a Date'
                  },{
                      text: 'Test menu',
					  handler: function(item){
							//Ext.MessageBox.alert('Info', item.text + ' is clicked');
							
							var westRegion = Ext.getCmp('westView');
							var centreRegion = Ext.getCmp('centerView');
							var viewPort = Ext.getCmp('myviewport');
							
							viewPort.remove(westRegion);
							viewPort.remove(centreRegion);
							
							//Ext.MessageBox.alert(viewPort.items[0]);.
							//alert(Ext.getCmp('northView').title);
							//var m = Ext.getCmp('northView').title;
							Ext.getCmp('northView').setTitle('<div style="text-align:center;">' + item.text + '</div>');
							Ext.getCmp('northView').collapse();
							
							var newWestRegion = {
								region: 'west',
								collapsible: true,
								split: true,
								title: 'Navigation New',
								id:'westView',
								width: 150
							};
							
							/* ***************************************** */
							
							var data1;
							
							Ext.Ajax.request({
								url: '/services/rest/payment/charts/chart1',

								success: function(response){
									var text = response.responseText;
									//alert(text);
									var parsedResponse = Ext.JSON.decode(text);
									
									linechartObject1 = parsedResponse['linechart'];
									//var root = linechartObject1['root'];
									//alert(root);
									//alert("linechartObject " + linechartObject1);
//									var data1 = linechartObject["data"];
//									alert("data " + data1);
//									var fields = linechartObject["fields"];
//									alert("fields : " +fields);
//									var xaxesTitle = linechartObject["xaxesTitle"];
//									alert("xaxesTitle = "+ xaxesTitle);
//									var yaxesTitle = linechartObject["yaxesTitle"];
//									alert("yaxesTitle = "+ yaxesTitle);

//									var store = Ext.create('Ext.data.JsonStore', {
//										fields: ['name', 'value'],
//										data: data1
//									});

									var chart = Ext.create('joydeep.view.LineChart', {
										//store : store,
										linechartObject : linechartObject1
									});
									
									var lineGraphStore1 = chart.getStore();
									var store2 = lineGraphStore1;
									
									var grid = Ext.create('Ext.grid.Panel', {
									    title: 'Simpsons',
									    store: store2,
									    columns: [
									        { header: 'Year',  dataIndex: 'name', flex : 1 },        
									        { header: 'Profit', dataIndex: 'value', flex : 1 }
									    ],
									    height: 200, 
									    width: 500//, 
									    //renderTo: Ext.getBody()
									});

									var newCenterRegion = {
											region: 'center',
											id:'centerView',                
											xtype: 'panel', // TabPanel itself has no title
											title : 'New Center Screen'	,
											//	frame : true,
											items : [chart, grid]
									};

									viewPort.add(newWestRegion);
									viewPort.add(newCenterRegion);
									
									
									if(lineGraphStore1){
										console.log('lineGraphStore1 ' + lineGraphStore1);
									}
								}
							});
							
							
							

							/* **************************************** */						
							
							
							
							
						}
                  },{
                	  text: 'Change Theme',
                	  handler: function(item){
                		  
                		  
                		  Ext.create('Ext.window.Window', {
                			    title: 'Theme Chooser',
                			    height: 200,
                			    width: 300,
                			    bodyPadding: 10,
                			  //  layout: 'vbox',
                			    defaultType: 'radiofield',
                			    items: [{
                			        xtype: 'radiogroup',
                			        id:'viewSelectionOption',
                			        fieldLabel: 'Select your theme',
                			        // Arrange radio buttons into two columns, distributed vertically
                			        columns: 1,
                			        vertical: true,
                			        items: [
                			            { boxLabel: 'Default Theme', name: 'rb', inputValue: 'extjs/resources/css/ext-all.css' , id:'default'},
                			            { boxLabel: 'Gray Theme', name: 'rb', inputValue: 'extjs/resources/css/ext-all-gray.css', id:'gray'}//,
                			           // { boxLabel: 'Access Theme', name: 'rb', inputValue: 'extjs/resources/css/ext-all-access.css', id:'access'},
                			        ]
                			    },{
                			    	xtype : 'button',
                			    	text: 'Save Theme',
                			    	handler: function(){
                			    		var selected = Ext.getCmp('viewSelectionOption').getValue();                			    		
                			    		console.log(selected);                			    		
                			    		console.log(selected.rb);
                			    		
                			    		var targetElement = document.getElementById("mainCss");
                			    		// alert("maincss=" +targetElement);
                			    		console.log("mainCss="+targetElement.getAttribute("href"));
                			    		
                			    		var parent = targetElement.parentNode; 
                			    		
                			    		if(selected.rb == targetElement.getAttribute("href")){
                			    			var nextExtStyleSheet = targetElement.nextSibling;
                			    			parent.removeChild(nextExtStyleSheet);
                			    		}else{                			    			
                			    			var elem = document.createElement("link");
                    			    		elem.setAttribute("rel",  "stylesheet");
                    			    		elem.setAttribute("type", "text/css");
                    			    		elem.setAttribute("href", selected.rb);
                			    			
                			    			if (parent.lastChild == targetElement) { 
                    			    			parent.appendChild(newElement); 
                    			    		} else {
                    			    			parent.insertBefore(elem,targetElement.nextSibling); 
                    			    		}
                			    		}
                			    	}
                			    }]
                			}).show();
                		  
                		  
                		  
                		   

                		  //document.getElementsByTagName("head")[0].appendChild(elem);

                	  }
                  }
              ]
    }
    
    
});

var dateMenu = Ext.create('Ext.menu.DatePicker', {
        handler: function(dp, date){
            Ext.example.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));

        }
    });

var insertAfter = function (newElement,targetElement) {
	var parent = targetElement.parentNode; 
	if (parent.lastChild == targetElement) { 
		parent.appendChild(newElement); 
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling); 
	} 
};
/*var menu = Ext.create('Ext.menu.Menu', {
    id: 'mainMenu',
    items: [{
           text: 'Choose a Date',
           iconCls: 'calendar'//,
         //  menu: dateMenu // <-- submenu by reference
       },{
           text: 'Choose a Color'//,
          // menu: colorMenu // <-- submenu by reference
       }
    ]
});*/
